<template>
	<uni-popup ref="sku_popup" type="center">
		<view class="w696 circle54 ov-hd">
			<view class="w-100 h146 bg-f8ff">
				<view class="w-100 h-100 bg-theme f-c-c rounded-bottom-54 t-0 font40 font600">{{ sku_list.title}}</view>
			</view>
			<view class="w-100 bg-theme">
				<view class="w-100 h-100 bg-f8ff rounded-right-54 px-6 py-3">
					<view v-for="(item,index) in sku_list.sku_info" :key="index" class="pb-2">
						<view class="font25 t-8 font400">{{item.title}}</view>
						<view class="fs-y-s">
							<text class="w148 h44 font24 t-20 circle12 mr-3 f-c-c my-1" @click="change_sku(index,number)"
								:class="item.code==obj.id?'bg-theme':'bg-dd'" v-for="(obj,number) in item.list"
								:key="obj.id">{{obj.title}}</text>
						</view>
					</view>

					<view class="w-100 f-b-c">
						<view class="font25 t-8">购买数量</view>
						<view class="f-b-c">
							<view class="w64 h64 f-c-c" @click="set_sku_reduce()">
								<view class="w40 h40 font40 font600 rounded-circle f-c-c pb-1 t-20 bg-theme">-</view>
							</view>
							<view class="px-2 h64 font28 font500 t-20 f-c-c">{{sku_list.number}}</view>
							<view class="w64 h64 f-c-c" @click="set_sku_add()">
								<view class="w40 h40 font40 font600 rounded-circle t-20 f-c-c pb-1 bg-theme">+</view>
							</view>
						</view>
					</view>
					
					<view class="w-100 f-b-c pt-6">
						<view class="t-20">
							<text class="font25">总计：</text>
							<text class="font28">¥</text>
							<text class="font35 font700">{{money}}</text>
						</view>
						<view class="font32 t-20 font600 circle12 h90 w276 bg-theme f-c-c" @click="set_food_car">
							+加入购物车
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="f-c-c">
			<image src="../../../static/icon_close.png" @click="set_close" class="w88 h88 p-2 bg-theme" />
		</view>
	</uni-popup>
</template>

<script>
	export default {
		data(){
			return{
				sku_list:{},
				money:0,
			}
		},
		props: {
			show_sku: {},
			sku:{},
		},
		watch:{
			show_sku(){
				if(this.show_sku){
					this.$refs.sku_popup.open()
					this.sku_list = {...{},...this.sku}
					this.set_money()
					
				}else{
					this.$refs.sku_popup.close()
				}
			}
		},
		methods:{
			set_close(){
				this.$emit("set_show_sku")
			},
			// sku 加 不代表购物车加  需添加到购物车才进行计算
			set_sku_add(){
				this.sku_list.number++
				this.set_money()
			},
			// sku 减 不代表购物车减  需添加到购物车才进行计算
			set_sku_reduce(){
				if(this.sku_list.number<=1){
					return
				}
				this.sku_list.number--
				this.set_money()
			},
			// 选中事件
			change_sku(index,number){
				this.sku_list.sku_info[index].code = this.sku_list.sku_info[index].list[number].id
				this.$forceUpdate()
			},
			// 计算价格
			set_money(){
				this.money = (this.sku_list.number * this.sku_list.price).toFixed(2)
			},
			// 加入购物车
			set_food_car(){
				this.$emit("get_sku",this.sku_list)
			}
		}
	}
</script>

<style>
</style>
